<template>
  <div class="collage-order">
    <tabs :tabs="tabLists" class="tab" :handleClick="handleClick"></tabs>
    <router-view @addVibible="changeVisible"></router-view>
  </div>
</template>

<script>
import Tabs from "@/components/tabs/tabs";

export default {
  data() {
    return {
      tabLists: [
        { label: "订单列表", name: "collage-order-list" },
        { label: "活动列表", name: "collage-activity-list" },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      const path = this.tabLists[tab.index].name;
      this.$router.push({
        path: path,
      });
      if (path != "add-activity") {
        this.tabLists = [
          { label: "订单列表", name: "collage-order-list" },
          { label: "活动列表", name: "collage-activity-list" },
        ];
      }
    },
    changeVisible(row) {
      if (row.status == "actlist") {
        this.tabLists = [
          { label: "订单列表", name: "collage-order-list" },
          { label: "活动列表", name: "collage-activity-list" },
        ];
        this.$router.push({ name: "collage-activity-list" });
      } else {
        this.tabLists = [
          { label: "订单列表", name: "collage-order-list" },
          { label: "活动列表", name: "collage-activity-list" },
          { label: row && row.activity_id ? "活动编辑" : "活动新增", name: "add-activity" },
        ];
        this.$router.push({ name: "add-activity", params: { row } });
      }
    },
  },
  components: {
    Tabs,
  },
  name: "collage-order",
};
</script>

<style scoped>
.collage-order {
  width: 100%;
  height: 100%;
}
</style>
